<!-- views/ai/DeepSeekChat.vue -->
<template>
  <div class="chat-container">
    <div class="chat-history">
      <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
        <div class="message-content" v-html="msg.htmlContent"></div>
      </div>
    </div>

    <div class="input-area">
      <el-input
        v-model="inputMessage"
        type="textarea"
        :rows="4"
        placeholder="输入您的问题..."
        @keydown.enter.exact.prevent="sendMessage"
      />
      <el-button
        type="primary"
        :loading="loading"
        @click="sendMessage"
        class="send-button"
      >
        发送
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { deepSeekChat, deepSeekChatStream } from '@/api/demo/deepseek'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark.css'

const md = new MarkdownIt({
  html: true,
  linkify: true,
  highlight: (str, lang) => {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs"><code>${hljs.highlight(str, {
          language: lang,
          ignoreIllegals: true
        }).value}</code></pre>`
      } catch (__) {}
    }
    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`
  }
})

const messages = ref([])
const inputMessage = ref('')
const loading = ref(false)

const formatContent = (content) => {
  return md.render(content)
}

const sendMessage = async () => {
  if (!inputMessage.value.trim()) return

  const userMessage = {
    role: 'user',
    content: inputMessage.value,
    htmlContent: formatContent(inputMessage.value)
  }

  messages.value.push(userMessage)
  loading.value = true

  try {
    const response = await deepSeekChat({
      //model: 'deepseek-chat',
      model: 'deepseek-ai/DeepSeek-V3',
      messages: [...messages.value.map(m => ({ role: m.role, content: m.content }))]
    })
    const content = JSON.parse(response.msg)
    const aiMessage = {
      role: 'assistant',
      content: content.choices[0].message.content,
      htmlContent: formatContent(content.choices[0].message.content)
    }
    messages.value.push(aiMessage)
  } catch (error) {
    ElMessage.error('请求失败：' + error.message)
  } finally {
    inputMessage.value = ''
    loading.value = false
  }
}
</script>

<style scoped>
.chat-container {
  max-width: 800px;
  margin: 20px auto;
  height: 70vh;
  display: flex;
  flex-direction: column;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 20px;
  background: #f9fafb;
}

.message {
  margin: 10px 0;
  padding: 15px 20px;
  border-radius: 8px;
  line-height: 1.6;
}

.message.user {
  background-color: #fff;
  margin-left: 20%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message.assistant {
  background-color: #ffffff;
  margin-right: 20%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e5e7eb;
}

.input-area {
  position: relative;
}

.send-button {
  margin-top: 10px;
  float: right;
}

/* Markdown内容样式 */
.message-content ::v-deep() {
  h1, h2, h3 {
    margin: 1em 0 0.5em;
    font-weight: 600;
  }

  p {
    margin: 0.8em 0;
  }

  pre {
    background: #1f2937;
    color: #fff;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
  }

  code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
  }

  blockquote {
    border-left: 4px solid #e5e7eb;
    padding: 0 1em;
    color: #6b7280;
    margin: 1em 0;
  }

  ul, ol {
    padding-left: 2em;
    margin: 1em 0;
  }

  li {
    margin: 0.3em 0;
  }
}
</style>
